/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/11/15
 */

import React from 'react';
import styles from './MemberList.less';
import { Button, Table, Modal, Divider } from 'antd';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import { generateImageView, config } from "utils";

const confirm = Modal.confirm;

export default class MemberList extends React.Component {

  static propTypes = {
    onEditOneRecord: PropTypes.func,
    onDeleteOneRecord: PropTypes.func,
  };

  _getColumnConfig = () => {
    const { onEditOneRecord, onDeleteOneRecord } = this.props;

    const btnClickHandler = (record, handleType) => {
      handleType === 'edit' && onEditOneRecord(record);
      handleType === 'delete' && confirm({
        title: '你确定要删除本条记录？',
        onOk () {
          onDeleteOneRecord(record.id, record);
        },
      });
    };

    return [

      {
        title: '头像',
        dataIndex: 'UserInfo.Profile.Avatar',
        key: 'avatar',
        width: 69,
        className: styles.avatar,
        render: avatar => {
          if (!avatar) {
            return <img src={config.defaultAvatar} alt={'头像'} width={'44'} />;
          }
          return <img src={generateImageView(avatar)} alt={'avatar'} width={'44'} />;
        },
      },
      {
        title: '团员ID',
        dataIndex: 'UserInfo.Profile.UserNO',
        key: 'memberNO',
        render: (text, record) => <Link to={`member-management/profile/${record.id}`}>{text}</Link>,
      },
      {
        title: '姓名',
        // dataIndex: 'Profile.',
        key: 'name',
        render: (_, record) => <span>{`${record.UserInfo.Profile.FirstName}${record.UserInfo.Profile.LastName}`}</span>,
      },
      {
        title: '手机号',
        dataIndex: 'UserInfo.Mobile',
        key: 'mobile',
      },
      {
        title: '邮箱',
        dataIndex: 'UserInfo.Email',
        key: 'email',
      },
      {
        title: '部门',
        dataIndex: 'Department.Name',
        key: 'department_name',
      },
      {
        title: '角色',
        // dataIndex: 'roles',
        key: 'role_name',
        render: (_, record) => {
          if (record.UserRoles && Array.isArray(record.UserRoles)) {

            return record.UserRoles.map(_ => {
              let group = _.Group;
              return <p key={_.ID} style={{ whiteSpace: "nowrap" }} >【{`${group.GroupName || '-'} : ${_.Name}`}】</p>;
            });
          }
          return null;
        },
      },
      {
        title: '职位',
        dataIndex: 'UserJob.Name',
        key: 'job',
      },
      {
        title: '操作',
        key: 'operation',
        render: (text, record) => {
          return (
            <span>
              <Button type="primary" size={'small'} onClick={() => btnClickHandler(record, 'edit')}>编辑</Button>
              <Divider type="vertical" />
              <Button type="danger" size={'small'} onClick={() => btnClickHandler(record, 'delete')}>删除</Button>
            </span>
          );
        },
      },

    ];
  }

  render () {
    const { ...tableProps } = this.props;

    return (
      <div>
        <Table
          {...tableProps}
          columns={this._getColumnConfig()}
          bordered
          className={classNames(styles.table)}
          simple
          rowKey={record => record.ID}
        />
      </div>
    );
  }
}
